<div class="layui-fluid">
  <div class="layui-card">

    <div class="layui-form layui-card-header layuiadmin-card-header-auto jhs-layui-form ">
      <form class="layui-form">
        <div class="layui-inline">
          <label class="layui-form-label">用户姓名</label>
          <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="搜索姓名" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">注册日期</label>
          <div class="layui-input-block">
            <input type="text" name="dates" class="layui-input" id="userDate" placeholder=" - ">
          </div>
        </div>
        <div class="layui-inline" style="font-size:0">
          <button class="layui-btn layui-icon layui-icon-search" lay-submit lay-filter="user-search"/>
        </div>
      </form>
 </div>

  <div class="layui-card-body">
    <div style="padding: 10px 0">
      <button class="layui-btn" id="selectDel">删除选中</button>
      <button class="layui-btn" id="userAdd">添加用户</button>
    </div>

  <table class="layui-hide" id="user" lay-filter="user"></table>

  </div>
</div>


<script>
layui.use(['laydate','table','form'], function(){
  var $ = layui.$;
  var form = layui.form;
  var laydate = layui.laydate;
  //日期范围
  laydate.render({
    elem: '#userDate'
    ,range: true
  });

  var table = layui.table;

  table.render({
    elem: '#user'
    ,title:"会员表"
    ,url:'/manager/member/userList'
    ,cellMinWidth: 80
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', title: 'ID',width:50, sort: true}
      ,{field:'name', title: '帐号'}
      ,{field:'', title: '分类',templet: function(date){
        return date.role.name;
      }}
      ,{field:'',title: '注册时间',templet: function(date){
        return formatDate(date.createdAt);
      }}
      ,{field:'', width:155,title: '操作',templet:function(){
        return '<div class="layui-btn-container"><button class="layui-btn layui-btn-normal layui-btn-sm layui-icon-edit layui-icon" lay-event="edit"> 编辑</button><button class="layui-btn layui-btn-sm layui-btn-danger layui-icon-delete layui-icon" lay-event="delete"> 删除</button></div>';
      }}
    ]]
    ,page: true
    ,response:{
      statusCode: 200
    }
  });

  //搜索
  form.on('submit(user-search)', function(data){

    let field = data.field;
    let dates = field.dates.split(' - ');

    table.reload('user',{
      where: {
        name: data.field.name,
        dateStart: dates[0],
        dateEnd: dates[1]
      }
    });
    return false; //阻止表单跳转
  });

  //表格操作
  table.on('tool(user)', function(obj){ 
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; 
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if(layEvent === 'delete'){ //删除
      layer.confirm('真的删除行么', function(index){
        layer.close(index);
        
        //向服务端发送删除指令
        $.get('/manager/member/userDel?id=' + data.id,res => {
          if(res.data > 0) return obj.del();
          layer.msg('错误：请重新删除！', {icon: 5}); 
        })
      });
    } else if(layEvent === 'edit'){ //编辑
      layer.open({
      type: 2
      ,title: "修改角色"
      ,content: '/manager/member/userEdit?name=' + data.name 
      ,maxmin: true
      ,area: ['760px', '80%']
      ,btn: ['确定', '取消']
      ,yes: function(index, layero){  
     
        //提交代码区
        var body = layer.getChildFrame('body', index);
        let name = $(body).find('.name').val();
        let roleId = $(body).find('.roleId').val();
        let password = $(body).find('.password').val();

        $.post("/manager/member/userEditTo",{
            id: data.id,
            name: name,
            roleId: roleId,
            password: password
          },(res)=>{
            console.log(res);

            //同步更新缓存对应的值
            obj.update({
              name: name
            });
           // table.reload('role'); //数据刷新
            layer.close(index); //关闭弹层
        })
      }
    });
      

    }
  });

  //表格工具栏
  $("#selectDel").on("click",()=>{
    let checkStatus = table.checkStatus('user'); //idTest 即为基础参数 id 对应的值
    let idArr = [];

    (checkStatus.data).forEach((val)=>{
      idArr.push(val.id);
    })
    
    layer.confirm('真删除选中的'+checkStatus.data.length+"条数据吗？",index=>{
      layer.close(index);

      $.get('/manager/member/userDel?id=' + idArr,res => {
        //console.log(res);
        if(res.data > 0) return table.reload('user');
        layer.msg('错误：请重新删除！', {icon: 5}); 
      })
    })
  })

  $("#userAdd").on("click",()=>{
    layer.open({
      type: 2
      ,title: "添加用户"
      ,content: '/manager/member/userAdd'
      ,maxmin: true
      ,area: ['760px', '80%']
      ,btn: ['确定', '取消']
      ,yes: function(index, layero){  
        //提交代码区
        var body = layer.getChildFrame('body', index);
        let name = $(body).find('.name').val();
        let roleId = $(body).find('.roleId').val();
        let password = $(body).find('.password').val();

        $.post("/manager/register/doRegister",{
            name: name,
            roleId: roleId,
            password: password
          },(res)=>{
        console.log(res);
        table.reload('user'); //数据刷新
        layer.close(index); //关闭弹层
        })
      }
    }); 
  })



});


</script>

<style>
  .layui-table-cell{height: auto  !important;}
</style>
